<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp1800 template" content="My 1800 App">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Bootstrap Library CSS CDN go here -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-- Other libraries go here -->

    <!-- Link to styles of your own -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

</head>

<body>
<<<<<<< HEAD
  <div class="b-example-divider"></div>

  <header class="p-3 text-bg-dark">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
          <svg class="bi me-2" width="40" height="200" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
          <img src="images/2f979d3c32622476c8aa02e22158499.png" alt=""height="100">
        </a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li><a href="#" class="nav-link px-2 text-secondary">Building strength</a></li>
          <li><a href="#" class="nav-link px-2 text-white">Typhoon monitoring</a></li>
          <li><a href="#" class="nav-link px-2 text-white">Learn more</a></li>
        </ul>

        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
          <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
        </form>

        <div class="text-end">
          <button type="button" class="btn btn-warning">Search</button>
        </div>
      </div>
    </div>
    <div class="card-group">
      <div class="card">
        <img src="images/c8b283f200a6bff44c8f9bbe599e132.png"height="360" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Typhoon hazard</h5>
          <p class="card-text">When the typhoon comes, it will cause floods, houses will be flooded, people will lose their homes, the traffic in the city may stop, and the power supply may be lost.</p>
          <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
        </div>
      </div>
      <div class="card">
        <img src="images/670c2191c4ae5896957428f5089cb7e.png"height="360" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Earthquake hazard</h5>
          <p class="card-text">
          Earthquakes of high magnitude are very scary, they can cause the ground to collapse, houses to collapse, and even cause tsunamis. The collapse of houses often leads to loss of life, because earthquakes are always very sudden and difficult to prepare for.</p>
          <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
        </div>
      </div>
      <div class="card">
        <img src="images/d9251425946acddd526f10869c9d28b.png"height="360" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">The power of harm is enormous</h5>
          <p class="card-text">The power of natural disasters is very terrible, so terrible that even nature itself is difficult to resist, as an individual human beings, of course, it is difficult to resist the power of natural disasters, but we human beings are a very large group, united the power of each individual we can slightly resist natural disasters.</p>
          <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
        </div>
      </div>
    </div>
  </header>
  

  <div class="b-example-divider"></div>
  

=======
    
>>>>>>> 6e240f97ec2a8030809f63be9c3a6796f49d9a48
    <!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>
    <!-- Stuff for body goes here -->


    <!---------------------------------------------->
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->

    <!-- Link to scripts of your own -->
    <!-- <script src="./scripts/script.js"></script> -->

</body>

</html>
